<template>
  <div class="container">
    <span class="title">违规详情</span>
    <el-card class="main-card">
      <el-table :data="paginatedData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="id" width="450" label="序号" header-align="center" align="center" class="table-header"></el-table-column>
        <el-table-column prop="violationDetail" width="700"  label="违规详情" header-align="center" align="center" class="table-header"></el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next, sizes, total, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          :page-sizes="[10, 20]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  name: 'ViolationDetails',
  data () {
    return {
      tableData: [
        { id: 1, violationDetail: '考试作弊' },
        { id: 2, violationDetail: '小抄' },
        { id: 3, violationDetail: 'AI生成作业' },
        { id: 4, violationDetail: 'AI生成作业' },
        { id: 5, violationDetail: '作业抄袭' },
        { id: 6, violationDetail: '考试作弊' },
        { id: 7, violationDetail: '考试作弊' },
        { id: 8, violationDetail: '考试作弊' },
        { id: 9, violationDetail: '作业抄袭' },
        { id: 10, violationDetail: '作业抄袭' },
        { id: 11, violationDetail: '作业抄袭' },
        { id: 12, violationDetail: '考试作弊' },
        { id: 13, violationDetail: '考试作弊' },
        { id: 14, violationDetail: '考试作弊' },
        { id: 15, violationDetail: '作业抄袭' },
        { id: 16, violationDetail: '作业抄袭' },
        { id: 17, violationDetail: '考试作弊' },
        { id: 18, violationDetail: '考试作弊' }
      ],
      total: 18,
      pageSize: 10,
      currentPage: 1,
      dialogVisible: false,
      deleteDialogVisible: false,
      isEdit: false,
      form: {
        id: null,
        violationDetail: ''
      },
      formLabelWidth: '120px'
    }
  },
  computed: {
    paginatedData () {
      return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  methods: {
    addRecord () {
      this.tableData.push({ id: this.total + 1, violationDetail: this.form.violationDetail })
      this.total += 1
      this.dialogVisible = false
    },
    updateRecord () {
      const index = this.tableData.findIndex(item => item.id === this.form.id)
      if (index !== -1) {
        this.$set(this.tableData, index, { ...this.form })
      }
      this.dialogVisible = false
    },
    deleteRecord () {
      const index = this.tableData.findIndex(item => item.id === this.form.id)
      if (index !== -1) {
        this.tableData.splice(index, 1)
        this.total -= 1
      }
      this.deleteDialogVisible = false
    },
    handlePageChange (page) {
      this.currentPage = page
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.currentPage = 1
    }
  },
  mounted () {
    this.search() // 初始搜索以填充表格
  }
}
</script>

<style scoped>
.container {
  min-width: 1666px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 7px;
  background: #eeeeee;
  padding: 20px;
  border-radius: 8px;
}

.title {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 15px;
  display: block;
}

.main-card {
  padding: 20px;
}

.add-button {
  margin-bottom: 20px;
  background-color: #0e69c4;
  border-color: #0e69c4;

}

.table-header {
  height: 50px;
}
.pagination-container {
  height: 100px;
  position:fixed;
  box-align: center;
  align-items: center;
  left:550px;
  text-align: right;
  font-size: 21px;
}
</style>
